<template>
  <h4 class="title_lv2">radio</h4>

  <div class="statement">
    <ol>
      <li>
        <div>基础radio</div>
        <div>
          <el-radio-group v-model="radio1" class="ml-4">
            <el-radio label="1">Option 1</el-radio>
            <el-radio label="2">Option 2</el-radio>
          </el-radio-group>
        </div>
      </li>
      <li>
        <div>禁用radio</div>
        <div>
          <el-radio-group v-model="radio1" class="ml-4" disabled>
            <el-radio label="1">Option 1</el-radio>
            <el-radio label="2">Option 2</el-radio>
          </el-radio-group>
        </div>
      </li>
      <li>
        <div>按钮样式</div>
        <div>
          <el-radio-group v-model="radio2">
            <el-radio-button :label="1">New York</el-radio-button>

            <el-radio-button :label="2"> Washington </el-radio-button>
          </el-radio-group>
        </div>
      </li>
      <li>
        <div>带有气泡提示</div>
        <div>
          <el-radio-group v-model="radio2" class="radio-badge">
            <el-radio-button :label="1">New York</el-radio-button>

            <el-badge :value="200" :max="99">
              <el-radio-button :label="2"> Washington</el-radio-button>
            </el-badge>
          </el-radio-group>
        </div>
      </li>
    </ol>
    <!-- 页面代码 源码 -->
    <dropWrap key="oreo">
      <pre><code class="language-js">{{ htm }} </code></pre>
    </dropWrap>
    <!-- 页面代码 源码 -->
  </div>
  <div class="hr das"></div>
  <h4 class="title_lv2">checkbox</h4>

  <div class="statement">
    <ol>
      <li>
        <div>select设置multiple,来设置多选</div>
        <div>
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="1">Option A</el-checkbox>
            <el-checkbox :label="2">Option B</el-checkbox>
            <el-checkbox :label="3">Option C</el-checkbox>
            <el-checkbox :label="4" disabled>Option D</el-checkbox>
            <el-checkbox :label="5">Option E</el-checkbox>
          </el-checkbox-group>
        </div>
      </li>
      <li>
        <div>中间状态值isIndeterminate</div>
        <div>
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">Check all</el-checkbox>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </li>
      <li>
        checkbox也可设置按钮样式，只需要把 el-checkbox 元素替换为 <span class="imp_txt">el-checkbox-button</span> 元素即可
      </li>
    </ol>
    <!-- 页面代码 源码 -->
    <dropWrap key="oreo">
      <pre><code class="language-js">{{ htm2 }} </code></pre>
    </dropWrap>
    <!-- 页面代码 源码 -->
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from "vue";
import type { CheckboxValueType } from "element-plus";
import dropWrap from "../../dropWrap.vue";

let htm = ref<string>(`
   3)带有气泡提示, "el-radio-group" 需要添加class="radio-badge"
  
   <el-radio-group v-model="radio2" class="radio-badge">
        <el-radio-button :label="1"  >New York</el-radio-button>
        <el-badge :value="200" :max="99"  >
             <el-radio-button :label="2" > Washington</el-radio-button> 
        </el-badge>    
    </el-radio-group>
  
        `);
let htm2 = ref<string>(`
1）checkbox设置禁用
   如果全部禁用在"el-checkbox-group"设置禁用，若只是禁用部分，则在"el-checkbox"设置禁用

2)中间状态值
    设置全选如反选，"indeterminate" 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果，
    "indeterminate" 为 "ture" 则如上所示，false则不显示
 `);

const radio1 = ref("1");
const radio2 = ref("1");

// checkbox
const checkList = ref([1, 2, 4]);
const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['Shanghai', 'Beijing'])
const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
/*  生命周期*/
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});
</script>
